<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <v-zdy></v-zdy>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    /*vue组件的本质是什么?
       它是一个自定义的html标签
       它是一系列html标签的集合
       它是html标签 css样式 js逻辑的集合
       它是一个vue实例*/


    //vue2.0 源码内部的一段代码
    // VueComponent.prototype = Object.create(Vue.prototype)
    // 作用
    // VueComponent.prototype.__proto__ === Vue.prototype


   /* VZdy组件的原型链:
        VZdy
            --__proto__--> VueComponent.prototype
            --__proto__-->  Vue.prototype
            --__proto__-->  Object.prototype
            --__proto__-->  null*/

    Vue.config.productionTip = false;
    new Vue({
        el:"#app",
        components:{
            "v-zdy":{
                template:`<span>v-zdy</span>`,
                mounted(){
                    //this : VueComponent实例
                    console.log("vzdy组件",this);
                }
            }
        },
        mounted(){
            // this : Vue实例
            console.log("app组件",this);
        }
    })

</script>
</html>